<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>运动效果练习，侧边栏分享 demo</title>
<link rel="stylesheet" href="css/base.css" />
<style>
	.div1{width:120px; height: 200px; position: fixed; top:50%; left:-120px; margin-top: -100px; background: #ccc;}
	.div1 .sharebtn{width:20px; height: 65px; display: block; text-align: center; position: absolute; top:66px; right: -30px; padding:5px 5px; color: #fff; background-color: #119DE8;}
	
</style>
</head>
<body>
<div class="wrap" style="height: 1000px;">
	<h2 class="wrap-h2">运动效果练习，侧边栏分享！</h2>
	<div class="wrap-main">
		<!--内容写这里-->
	</div>
	
	<div class="div1" id="div1">
		<span class="sharebtn">分享到</span>
	</div>
</div>
<script>
	var timer = null;
	
	window.onload = function (){
		var oDiv1 = document.getElementById("div1");
		
		oDiv1.onmouseover = function (){
			startMove(0);
		}
		
		oDiv1.onmouseout = function () {
			startMove(-120);
		}
		
	}
	
	function startMove(iTarget){
		var oDiv1 = document.getElementById("div1");
		var iSpeed = iTarget < 0 ? (-8) : 8;
		
		clearInterval(timer);
		timer = setInterval(function(){
			if( oDiv1.offsetLeft == iTarget ){
				clearInterval(timer);
			}
			else{
				oDiv1.style.left = oDiv1.offsetLeft + iSpeed + 'px';
			}
		},30)
	}
</script>
</body>
</html>
